<template>
  <div class="login">
     <div>
        这是模仿的pomelo这个游戏框架的聊天室弄成的，时间有限，前端界面做的丑陋，没有对用消息以及room进行区分
        ，功能上实现了 多个聊天室内消息群发，点对点发送，聊天室之间的消息隔离，可以根据实际业务场景细化，优化，
        暂时是单体的，因为单体的server可以尽情压榨一台主机的性能了，后面会向分布式演化,项目是前后端分离部署的，服务器配置最低配，带宽也就1M
      </div>
      <div class="in">
        <div class="item"><el-input v-model.trim="username" placeholder="请输入用户名"></el-input></div>
        <div class="item"><el-input v-model.trim="room" placeholder="请输入房间名(以字母或者数字组合)"></el-input></div>
        <div class="item"><el-button @click="login" type="primary">立即登录</el-button></div>
      </div>   
  </div>
</template>

<script>

export default {
  name: 'home',
  data(){
    return {
       room:'',
       username:''
    }
  },
  computed:{
   
  },
  methods:{
    login(){
       console.log(this.username);
       sessionStorage.setItem("username",this.username)
       sessionStorage.setItem("room",this.room)
       this.$router.replace('/chat')
    }
 
  }
}
</script>
<style scoped lang="less">

   .login{
       width:100vw;
       height:100vh;
       >.in{
          margin: 0 auto;
          width:30vw;
          height:200px;
          margin-top:20vh;
          display: flex;
          justify-content: space-around;
          flex-direction: column;
          align-items: center;
          >.item{
             width:70%;
          }
       }

   }

</style>